ReactのMain Concept：8. Lists and Keys

JSでmapがつかえるみたいにReactでもコンポーネントのレンダリングにListが便利

Rendering Multiple Components

複数のリストを表示する例

code:js

const listItems = numbers.map((number) =>

<li>{number}</li>

);

ReactDOM.render(

<ul>{listItems}</ul>,

document.getElementById('root')

);

Basic List Component

"Warning: Each child in a list should have a unique 'key'

Keys

どのitemに変更/追加/削除があったのか、Reactが特定するのに使う

兄弟要素の中でuniqueに特定できるキーを与える必要がある。idとかを与える場合が多い

code:key.js

const todoItems = todos.map((todo) =>

<li key={todo.id}>

{todo.text}

</li>

);

itemがIDを持ってない場合indexを使う方法がある

code:lastResort.js

const todoItems = todos.map((todo, index) =>

// Only do this if items have no stable IDs

<li key={index}>

{todo.text}

</li>

);

しかし、itemの順序が変わる場合にはこれは非推奨

パフォーマンスが悪化するしcomponantのstateに問題が起きるかも

list itemにキーを明示的に与えなないとReactはデフォルトでindexをkeyにする

Extracting Components with Keys

keyは囲まれた配列（surrounding array）の中においてのみ意味がある（コードを見よ）

Keys Must Only Be Unique Among Siblings

keyはReactにヒントを与えるけど、componentに値を渡さない

component側でkeyの値は取れない

Embedding map() in JSX

でも悪くなる場合もある。状況によって使い分けよう